import { createApp, createVNode } from 'vue';
import App from './App.vue';
import dayjs from 'dayjs';
import router from './router';
import store, { key } from './store';
import i18n from './locale';

import request from '@/plugins/request';
import loading from '@/plugins/loading';
import ECharts from 'vue-echarts';

import './api.config.node.shims';

import {
  ConfigProvider,
  Button,
  message,
  Modal as ModalAlias,
  Spin,
  Form,
  Input,
  Radio,
  Pagination,
  Calendar,
  DatePicker,
  Layout,
  Menu,
  Alert,
  Card,
  Select
} from 'ant-design-vue';

import {
  SearchOutlined,
  PlusOutlined,
  UserOutlined,
  PoweroffOutlined,
  DownOutlined,
  ReloadOutlined,
  RollbackOutlined,
  EditOutlined,
  LockOutlined,
  DeleteOutlined,
  CalendarOutlined,
  ExclamationCircleOutlined,
  FileExcelOutlined,
  BarcodeOutlined,
  TableOutlined,
  SettingOutlined,
  SmileOutlined
} from '@ant-design/icons-vue';

import Modal from '@/components/Modal';
import Table from '@/components/Table';

if (process.env.MY_MOCK === 'true') {
  require('../mock');
}

const app = createApp(App);

//#region 注册全局插件
const plugins: any = {
  router,
  i18n,
  ConfigProvider,
  Button,
  Spin,
  Form,
  Input,
  Radio,
  Pagination,
  Calendar,
  DatePicker,
  Layout,
  Menu,
  Alert,
  Card,
  Select
};
Object.keys(plugins).forEach(key => {
  app.use(plugins[key]);
});
//#endregion

//#region 注册全局antd icon
const globalAntdIcons: any[] = [
  SearchOutlined,
  PlusOutlined,
  UserOutlined,
  PoweroffOutlined,
  DownOutlined,
  ReloadOutlined,
  RollbackOutlined,
  EditOutlined,
  LockOutlined,
  DeleteOutlined,
  CalendarOutlined,
  ExclamationCircleOutlined,
  FileExcelOutlined,
  BarcodeOutlined,
  TableOutlined,
  SettingOutlined,
  SmileOutlined
];
globalAntdIcons.forEach((comp: any) => {
  app.component(comp.displayName, comp);
});
//#endregion

//#region 注册全局api
const globalApi: any = {
  message,
  loading,
  modal: ModalAlias,
  dayjs
};
Object.keys(globalApi).forEach(key => {
  app.config.globalProperties[`$${key}`] = globalApi[key];
});
//#endregion

// 注册 request
app.use(request as any, {});

app.use(store, key);

// 注册 Modal
app.use(Modal as any, {
  props: {
    // 是否显示右上角的关闭按钮
    closable: true,
    // 是否支持键盘 esc 关闭
    keyboard: false,
    // 点击蒙层是否允许关闭
    maskClosable: false
  }
});

// 注册 Table
app.use(Table as any, {
  props: {
    style: {
      bordered: true
    },
    pagination: {
      // showTotal: (total: number) => `共 ${total} 条`,
      showTotal: null,
      showQuickJumper: false,
      showSizeChanger: true
    }
  }
});

// 重载 modal 的 confirm 方法，使其可以默认有icon图标
const _confirm = ModalAlias.confirm;
// @ts-ignore
ModalAlias.confirm = props =>
  _confirm({
    icon: createVNode(ExclamationCircleOutlined),
    ...props
  });

app.component('v-chart', ECharts);
app.mount('#app');
